import { searchMovieUsingPOST } from '@/services/otherworldly-station-backend/DoubanController';
import { Col, Layout, Row, Spin } from 'antd';
import Search from 'antd/es/input/Search';
import { Content } from 'antd/es/layout/layout';
import React, { useState } from 'react';
import styles from './index.less';

const searchParams = {
    /** 获取条数，默认20 */
    count: 20,
    /** 搜索关键字 */
    searchKeys: '',
    /** 开始偏移量，默认0 */
    start: 0,
    /** 电影标签 */
    tag: '',
};
const FilmTelevision: React.FC = () => {
    const [loading, setLoading] = useState<boolean>(false);
    const [searchKey, setSearchKey] = useState<string>('');
    const [doubanCount, setDoubanCount] = useState<number>(0);
    const [doubanRecords, setDoubanRecords] = useState<API.DoubanSearchMovieVO[]>([]);

    const searchData = async (count: number, start: number, value: string) => {
        setDoubanRecords([]);
        setLoading(true);
        searchMovieUsingPOST({ ...searchParams, searchKeys: value, count, start })
            .then((res) => {
                if (res.code === 0) {
                    setDoubanCount(res.data?.total || 0);
                    setDoubanRecords(res.data?.records || []);
                    setSearchKey(value);
                }
            })
            .finally(() => {
                setLoading(false);
            });
    };

    return (
        <>
            <Layout>
                <div className={styles.searchHeader}>
                    <Search
                        prefix="🔍"
                        style={{ verticalAlign: 'middle', width: '65%' }}
                        placeholder="输入想要看的影片"
                        enterButton="搜索"
                        size="large"
                        allowClear
                        onSearch={async (value) => {
                            await searchData(20, 0, value).finally(() => {});
                        }}
                    />
                </div>
                <Spin spinning={loading}>
                    <Content>
                        <Row gutter={24}>
                            <Col lg={24} md={24} sm={24} xs={24} xxl={24} xl={24}></Col>
                        </Row>
                    </Content>
                </Spin>
            </Layout>
        </>
    );
};

export default FilmTelevision;
